<div class="home">
  <div class="container-fluid">
    <header class="header alert alert-primary">
      <div class="row justify-content-end align-items-center">
        <div class="col-4">
          <h2 class="title text-center" routerLink="/home">Hero Management Office</h2>
        </div>
        <div class="col-4">
          <a class="login" *ngIf="!currentUser else userTpl" routerLink="/login">登录</a>
          <ng-template #userTpl>
            <div class="dropdown">
              <a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ currentUser.name }}</a>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" routerLink="user-center">个人中心</a>
                <a class="dropdown-item" (click)="logout()">退出登陆</a>
              </div>
            </div>
          </ng-template>
        </div>
      </div>
    </header>
  </div>
  <div class="container">
    <nav aria-label="breadcrumb">
      <ul class="breadcrumb">
        <li class="breadcrumb-item" *ngFor="let item of breadcrumb">{{ item }}</li>
      </ul>
    </nav>
    <div class="content" [@routeAnimations]="prepareRoute(outlet)">
      <router-outlet #outlet="outlet"></router-outlet>
    </div>
  </div>
</div>
